<template>
    <div class="head-wrap">
        <div class="title-bar">
            <h1>花岗镇四合河丰安置点一标段</h1>
        </div>
        <div class="menu-bar">
            <menuList :list="leftList"></menuList>
            <menuList :list="rightList"></menuList>
        </div>
    </div>
</template>

<script>
import menuList from '@/components/menuList.vue'
export default {
    name: 'tophead',
    components: { menuList },
    data() {
        return {
            leftList: [{
                name: '首页',
                path: '/'
            }, {
                name: '视频监控',
                path: '/about'
            }, {
                name: '劳务实名制',
                path: '/service'
            }, {
                name: 'BIM管理',
                path: '/bim'
            }, {
                name: '现场实景',
                path: '/views'
            }],
            rightList: [{
                name: '设备管理',
                path: '/device'
            }, {
                name: '物料管理',
                path: '/wuliao'
            }, {
                name: '环境监测',
                path: '/env'
            }, {
                name: '用水用电',
                path: '/water'
            }]
        }
    }
}
</script>

<style lang="scss" scoped>
.head-wrap {
    margin: 0 20px;
}

.title-bar {
    height: 50px;
    background: url(../assets/bgs/head_bg.png);
    background-position: center;
    background-size: contain;

    h1 {
        margin: 0;
        color: #29e2fc;
        font-size: 22px;
        padding: 5px 0 15px;
        text-align: center;
    }
}

.menu-bar {
    display: flex;
    justify-content: space-between;
}
</style>